<template>
  <div id="mySecondKill">
    <x-header title="秒杀列表" :right-options="{showMore: false}" @on-click-more="show = true"></x-header> 
  
      <div id="killList_wrap"> 
        <div class="killList_contents" v-for="(item, index) in this.secondKillList" :key="index" @click="goDetailKill(item.goods.goodsid)">
            <div class="shopList_img">
                <img :src="getImgUrl(item.goods.product_thumb_image)" alt="">
            </div>
            <div class="killList_detail">
               <div class="killList_desc">{{item.goods.goodsname}}</div>
               <div class="killList_spans"><span>小米</span><span>已抢0件</span></div>               
               <box gap="10px" >
                <x-progress style="background:#ed393d;width:160px" :percent="percent2" :show-cancel="false"></x-progress>
              </box>
               <div class="killList_prices">￥{{item.goods.shop_price}} <span id="sellPrice">￥{{item.goods.market_price}}</span><span id="goQiang">去抢购</span></div>
               <!-- <div class="killList_others"> 20条评价 &nbsp;98%好评</div> -->
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, Swiper, SwiperItem, XHeader,XProgress, Box} from "vux";
import ShopCell from "../../components/toolComponent/shopCell.vue";
import $ from "jquery";
import { homeUrl } from "../../components/utils/utils.js";
import axios from "axios";
import qs from "qs";

const list = () => ["红包", "购物券"];
export default {
  components: {
    ShopCell,
    XHeader,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    XProgress, Box
  },
  data() {
    return {
      list: [
      ],
      list2: list(),
      demo2: "商品",
      demoDisabled: "A",
      index: 0,
      percent2: 60,
      redPacketList: [
       
      ],
      secondKillList:this.$route.params.secondKillList,
      youhuiList: [
        {
          src: "http://placeholder.qiniudn.com/60x60/3cc51f/ffffff",
          title:
            '<p><span>标题1</span><span style="float:right;color:#cc0010;font-size:18px">￥0</span></p>',
          desc: "<p>由各种物质组成的巨型球状天体，叫做星球。</p><p>星球有一定的形状，有自己的运行轨道。</p>",
          url: "/component/cell"
        }
      ]
    };
  },
  mounted: function() {
    // this.$nextTick(function() {
    //   this.$refs.mySwiper.xheight = "300px";
    //   var that = this;
    //   $(function() {
    //     var windowHeight = $(window).height();
    //     var headerHeight = $(".vux-header").outerHeight();
    //     var tabHeight = $(".vux-tab").outerHeight();
    //     that.$refs.mySwiper.xheight =
    //       windowHeight - headerHeight - tabHeight + "px";
    //     $(".vux-swiper").css({ overflow: "scroll" });
    //   });
    // });
  },
  methods: {
    switchTabItem(index) {
      this.$vux.loading.show({
        text: "loading"
      });
      var that = this;
      setTimeout(() => {
        this.$vux.loading.hide();
        that.$data.index = index;
        if (index == 0) {
          this.redPackReq()
          // that.$data.list = this.redPacketList;
        }
        if (index == 1) {
          that.$data.list = this.youhuiList;
        }
        $(".vux-swiper").scrollTop(0);
      }, 500);
    },
    // 秒杀列表
    secondKillReq(){
      console.log(this.secondKillList)
      var socket = ""
        if (socket == "") {
          socket = new WebSocket("ws://" + "www.dangsh" + "/echo_once/");
        }

        socket.onopen = function () {
          console.log('WebSocket open');//成功连接上Websocket
          socket.send("你好 服务器  nihao fuwuqi");//发送数据到服务端
        };
        socket.onmessage = function (e) {
          console.log("收到服务器的消息")
          console.log(e)
          console.log('message: ' + e.data);//打印服务端返回的数据
        };

    },
    goDetailKill(goodsid){
      console.log(goodsid)
      this.$router.push({
        name: 'goods_detail',
        params: {
          goodsId: goodsid
        }
      })
    },
    // getImgUrl(images){
    //   var shopImgs = homeUrl() + "static/myfile/"+images;
    //   return shopImgs;
    // },
        getImgUrl(imgObj){
        if(imgObj!=null){
            //  var datasSrc=imgObj.split("---");
            var srcUrl=homeUrl()+imgObj;
            console.log(srcUrl)
            return srcUrl
        }
       
    },
    // 
  },
  created(){
    this.secondKillReq()
  }
};
</script>

<style lang="less" scoped>
#killList_wrap{
    // margin: 0px 0.5rem;
}
#mySecondKill .killList_contents{
    display: flex;
    // width:100%;
    // margin-top:0.1rem; 
    // border-radius: 5px;
    padding: 6px;
    background: #ffffff;
    border-bottom: 1px solid #ebebeb
}
#mySecondKill .killList_img{
    width: 110px;
}
.killpList_img img{
    width: 100px;
    height: 100px;
}
#mySecondKill .killList_detail{
    flex: 1
}
#mySecondKill .killList_spans span{
    display: inline-block;
    background: #f4f4f4;
    margin: 1px;
    font-size: 8px;
    color: #666
}
#mySecondKill .killList_prices{
    font-size: 16px;
    color: #ed393d
}
// #mySecondKill .killList_prices span{
//  display: inline-block;
//  padding: 0px 0.5rem;
//     background: #ed393d;
//     margin: 1px;
//     border-radius: 10px;
//     font-size: 8px;
//     color: #ffffff
// }
#mySecondKill .killList_desc{
    font-size: 14px;
     display: -webkit-box;  
  word-break: break-all;  
  text-overflow: ellipsis;  
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 1;
  overflow: hidden
}
#mySecondKill .killList_others{
    font-size: 10px;
    color: #666
}
#mySecondKill #sellPrice{
text-decoration: line-through;
color: #ccc
}
#mySecondKill #goQiang{
    display: inline-block;
 padding: 0px 0.5rem;
    background: #ed393d;
    margin: 1px;
    // border-radius: 10px;
    // font-size: 12px;
    color: #ffffff;
    float: right;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center
}
#mySecondKill .weui-progress__inner-bar {
    width: 0;
    height: 100px!important;
    background-color: #ed393d!important;
}
#mySecondKill .weui-progress__bar {
    background-color: #EBEBEB;
    height: 10px!important;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
</style>